<template>
  <div class="hm-mine">
    <div class="hm-mine-header">
      <div class="hm-mine-header-left">
        <img :src="userInfo.avatar" alt="" />
      </div>
      <div class="hm-mine-header-right">{{ userInfo.username }}</div>
    </div>
    <div class="hm-mine-content">
      <van-tabbar
        v-model="active"
        active-color="#000000"
        inactive-color="#000000"
      >
        <van-tabbar-item icon="clock-o">历史记录</van-tabbar-item>
        <van-tabbar-item icon="like-o">我的收藏</van-tabbar-item>
        <van-tabbar-item icon="good-job-o">我的点赞</van-tabbar-item>
      </van-tabbar>
    </div>
    <div class="hm-mine-list">
      <van-cell-group>
        <van-cell title="推荐分享" is-link />
        <van-cell title="意见反馈" is-link />
        <van-cell title="关于我们" is-link />
        <van-cell title="退出登录" is-link @click="logout" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      active: 0,
      userInfo: {},
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    logout() {
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
    getUserInfo() {
      axios({
        method: "get",
        url: "http://interview-api-t.itheima.net/h5/user/currentUser",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      }).then((res) => {
        this.userInfo = res.data.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
@primary-color: #fa6d1d;
@background-color: #f0f0f0;
@header-height: 10vh; // 使用相对单位

.hm-mine {
  width: calc(100vw - 20px); // 减去内边距
  height: calc(100vh - 20px); // 减去内边距
  background-color: @background-color;
  overflow: hidden; // 防止溢出
  padding: 10px; // 添加内边距
}

.hm-mine-header {
  display: flex;
  align-items: center;
  padding: 1em; // 使用相对单位
  width: 90%;
  height: @header-height;
  // background-color: red;
  .hm-mine-header-left {
    img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin-right: 20px;
    }
  }
  .hm-mine-header-right {
    font-size: 20px;
    font-weight: bold;
  }
}

.hm-mine-content {
  width: 100%;
  height: @header-height;
  margin-top: 5px;
  // overflow-y: auto; // 允许垂直滚动
}

.hm-mine-list {
  margin-top: 2vh; // 使用相对单位
}

.van-tabbar {
  position: relative;
  width: 100%;
  height: @header-height;
}
</style>
